/* Table of Contents

:: Visibility
:: Alerts
:: Labels
:: Tooltips
:: Panels
:: Accordion
:: Side Nav
:: Sub Nav
:: Pagination
:: Breadcrumbs
:: Lists
:: Inline/Link Lists
:: Keystroke Chars
:: Image Thumbnails
:: Video
:: Tables
:: Microformats
:: Progress Bars
:: Pricing Tables

*/

  /* Alerts ---------------------- */

  // div.alert-box { display: block; padding: 6px 7px 7px; font-weight: bold; font-size: ms(0); color: $white; background-color: $mainColor; border: 1px solid rgba(#000,.1); margin-bottom: 12px; @include border-radius($alertBorderRadius); text-shadow: 0 -1px rgba(#000,.3); position: relative;

  //   &.success { background-color: $successColor; color: #fff; text-shadow: 0 -1px rgba(#000,.3); }
  //   &.alert { background-color: $alertColor; color: #fff; text-shadow: 0 -1px rgba(#000,.3); }
  //   &.secondary { background-color: $secondaryColor; color: darken($secondaryColor, 60%); text-shadow: 0 1px rgba(#fff,.3); }

  //   a.close { color: #333; position: absolute; #{$defaultOpposite}: 4px; top: -1px; font-size: ms(1); opacity: 0.2; padding: 4px; }
  //   a.close:hover, a.close:focus { opacity: 0.4; }

  // }


  /* Labels ---------------------- */

  .label { padding: 1px 4px 2px; font-size: ms(0) - 2; font-weight: bold; text-align: center; text-decoration: none; line-height: 1; white-space: nowrap; display: inline; position: relative; bottom: 1px; color: #fff; background: $mainColor;

    &.radius { @include border-radius($buttonRadius); }
    &.round { padding: 1px 7px 2px; @include border-radius(1000px); }

    &.alert     { background-color: $alertColor; }
    &.success   { background-color: $successColor; }
    &.secondary   { background-color: $secondaryColor; color: darken($secondaryColor, 60%); }

  }

  /* Tooltips ---------------------- */

  // .has-tip { border-bottom: $hasTipBorderBottom; cursor: help; font-weight: $hasTipFontWeight; color: $hasTipFontColor;

  //   &:hover, &:focus { border-bottom: $hasTipBorderBottomHover; color: $hasTipFontColorHover; }
  //   &.tip-left, &.tip-right { float: none !important; }

  // }

  // .tooltip { display: none; background: $tooltipBackgroundColor; background: rgba($tooltipBackgroundColor,$tooltipBackgroundOpacity); position: absolute; color: $tooltipFontColor; font-weight: $tooltipFontWeight; font-size: $tooltipFontSize; padding: 5px; z-index: 999; @include border-radius($tooltipBorderRadius); line-height: normal;

  //   &>.nub { display: block; width: 0; height: 0; border: solid 5px; border-color: transparent transparent $tooltipBackgroundColor transparent; border-color: transparent transparent rgba($tooltipBackgroundColor,$tooltipBackgroundOpacity) transparent; position: absolute; top: -10px; #{$defaultFloat}: 10px; }
  //   &.tip-override>.nub { border-color: transparent transparent $tooltipBackgroundColor transparent !important; border-color: transparent transparent rgba($tooltipBackgroundColor,$tooltipBackgroundOpacity) transparent !important; top: -10px !important; }
  //   &.tip-top>.nub, &.tip-centered-top>.nub  { border-color: $tooltipBackgroundColor transparent transparent transparent; border-color: rgba($tooltipBackgroundColor,$tooltipBackgroundOpacity) transparent transparent transparent; top: auto; bottom: -10px; }

  //   &.tip-left, &.tip-right { float: none !important; }

  //   &.tip-left>.nub { border-color: transparent transparent transparent $tooltipBackgroundColor; border-color: transparent transparent transparent rgba($tooltipBackgroundColor,$tooltipBackgroundOpacity); right: -10px; left: auto; }
  //   &.tip-right>.nub { border-color: transparent $tooltipBackgroundColor transparent transparent; border-color: transparent rgba($tooltipBackgroundColor,$tooltipBackgroundOpacity) transparent transparent; right: auto; left: -10px; }

  //   &.noradius { @include border-radius(0); }
  //   &.opened { color: $hasTipFontColorHover !important; border-bottom: $hasTipBorderBottomHover !important; }

  // }

  .tap-to-close { display: block; @include font-size($tapToCloseFontSize); color: $tapToCloseFontColor; font-weight: $tapToCloseFontWeight; }

  /* Panels ---------------------- */

  .panel { background: darken($white, 5%); border: solid 1px darken($white, 10%); margin: 0 0 22px 0; padding: 20px;

    > :first-child { margin-top: 0; }
    > :last-child { margin-bottom: 0; }

    &.callout { background: $mainColor; color: #fff; border-color: darken($mainColor, 10%); @include box-shadow(inset 0px 1px 0px rgba(255,255,255,0.5));
      a { color: #fff; }
      .button { background: $white; border: none; color: $mainColor; @include text-shadow(none);

        &:hover, &:focus { background: rgba(255,255,255,0.8); }
      }
    }

    &.radius { @include border-radius($buttonRadius); }

  }

  /* Accordion ---------------------- */

  // ul.accordion { margin: 0 0 22px 0; border-bottom: 1px solid $secondaryColor;

  //   &>li {  list-style: none; margin: 0; padding: 0; border-top: 1px solid $secondaryColor;

  //     & > div.title { cursor: pointer; background: lighten($secondaryColor, 5%); padding: 15px; margin: 0; position: relative;  border-#{$defaultFloat}: 1px solid $secondaryColor; border-#{$defaultOpposite}: 1px solid $secondaryColor; @include single-transition(0.15s, background, linear);

  //       h1, h2, h3, h4, h5 { margin: 0; }
  //       &:after { @include cssTriangle(6px, darken($secondaryColor, 30%), $defaultOpposite); position: absolute; #{$defaultOpposite}: 15px; top: 21px; }
  //     }

  //     .content { display: none; padding: 15px; }

  //     &.active { border-top: 3px solid $mainColor;

  //       .title { background: $white; padding-top: 13px;

  //         &:after { @include cssTriangle(6px, darken($secondaryColor, 30%), top); }
  //       }
  //       .content { background: $white; display: block; border-#{$defaultFloat}: 1px solid $secondaryColor; border-#{$defaultOpposite}: 1px solid $secondaryColor; }
  //     }
  //   }
  // }



  /* Side Nav ---------------------- */

  ul.side-nav { display: block; list-style: none; margin: 0; padding: ms(1) 0;

    li { display: block; list-style: none; margin: 0 0 (ms(0)/2) 0;

      a { display: block; }
      &.active a { color: lighten($black, 30%); font-weight: bold; }
      &.divider { border-top: 1px solid darken($white, 10%); height: 0; padding: 0; }
    }
  }

  /* Sub Navs http://www.zurb.com/article/292/how-to-create-simple-and-effective-sub-na ---------------------- */

  // dl.sub-nav { display: block; width: auto; overflow: hidden; margin: -4px 0 18px; margin-#{$defaultOpposite}: 0; margin-#{$defaultFloat}: -9px; padding-top: 4px;

  //   dt, dd { float: $defaultFloat; display: inline; margin-#{$defaultFloat}: 9px; margin-bottom: 10px; }
  //   dt { color: #999; font-weight: $bodyFontWeight; }
  //   dd a { text-decoration: none; @include border-radius(1000px); }
  //   dd.active a { font-weight: bold; background: $mainColor; color: #fff; padding: 3px 9px; cursor: default; }

  // }

  /* Pagination ---------------------- */

  // ul.pagination { display: block; height: 24px; margin-#{$defaultFloat}: -5px;

  //   li { float: $defaultFloat; display: block; height: 24px; color: #999; font-size: ms(0); margin-#{$defaultFloat}: 5px;

  //     a { display: block; padding: 1px 7px 1px; color: #555; }
  //     &:hover a, a:focus { background: darken($white, 10%); }
  //     &.unavailable a { cursor: default; color: #999; }
  //     &.unavailable:hover a, &.unavailable a:focus { background: transparent; }
  //     &.current a { background: $mainColor; color: $white; font-weight: bold; cursor: default;
  //       &:hover, &:focus { background: $mainColor; }
  //     }
  //   }

  // }

  // div.pagination-centered { text-align: center; 

  //   ul > li { float: none; display: inline-block; }
  // }

  /* Breadcrums ---------------------- */

  ul.breadcrumbs { display: block; @include topBarBG(); padding: 6px 10px 7px; @include border-radius(4px 4px 0 0); overflow: hidden; margin-#{$defaultFloat}: 0; @include box-shadow(#555 0 2px 5px);

    li { margin: 0; padding: 0 12px 0 0; float: $defaultFloat; list-style: none;

      a, span { text-transform: uppercase; @include font-size(14); padding-#{$defaultFloat}: 12px; }
      span { color: #ccc; }
      &:first-child a, &:first-child span { padding-#{$defaultFloat}: 0; }
    }

    li:before { content: "\BB"; color: #fff; }
    li:first-child:before { content: ""; }
    li.current a { cursor: default; color: #333; }
    li:hover a, li a:focus { text-decoration: underline; }
    li.current:hover a, li.current a:focus { text-decoration: none; }
    li.unavailable {
      a { color: #999; }
      &:hover a, a:focus { text-decoration: none; color: #999; cursor: default; }
    }

  }

  /* Inline Link List */
  // ul.inline-list, ul.link-list { margin: 0 0 $linkListBottomMargin; padding: 0; list-style: none; overflow: hidden;

  //   & > li { list-style: none; float: $defaultFloat; margin-#{$defaultFloat}: 22px; display: block;

  //     & > * { display: block; }
  //   }
  // }

  /* Keytroke Characters ---------------------- */

  .keystroke, kbd { font-family: "Consolas", "Menlo", "Courier", monospace; font-size: ms(0) - 1; padding: 2px 4px 0px; margin: 0; background: darken($white, 7%); border: solid 1px darken($white, 14%); @include border-radius($buttonRadius); }

  /* Image Thumbnails ---------------------- */
  .th { display: block;
    img { display: block; border: solid 4px #fff; @include box-shadow(0 0 0 1px rgba(#000,.2)); @include border-radius($thumbRadius); @include transition-property(box-shadow); @include transition-duration(300ms); }
    &:hover, &:focus {
      img { @include box-shadow(0 0 6px 1px rgba($mainColor,.5)); }
    }
  }

  /* Video - Mad props to http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/ ---------------------- */

  .flex-video {
    position: relative;
    padding-top: 25px;
    padding-bottom: 67.5%;
    height: 0;
    margin-bottom: 16px;
    overflow: hidden;

    &.widescreen { padding-bottom: 57.25%; }
    &.vimeo { padding-top: 0; }

    iframe, object, embed, video { position: absolute; top: 0; #{$defaultFloat}: 0; width: 100%; height: 100%; }

  }

  /* Microformats ---------------------- */

  ul.vcard { display: inline-block; margin: 0 0 12px 0; border: 1px solid #ddd; padding: 10px;

    li { margin: 0; display: block; }
    li.fn { font-weight: bold; font-size: ms(0) + 1; }

  }

  p.vevent {
    span.summary { font-weight: bold; }
    abbr { cursor: default; text-decoration: none; font-weight: bold; border: none; padding: 0 1px; }
  }

  /* Progress Bar ---------------------- */

  div.progress { padding: $progBarPad; margin-bottom: 10px; border: $progBarBorderSize solid $progBarBorderColor; height: $progBarHeight;

  	/* meter */
  	.meter { background: $mainColor; height: 100%; display: block; width:50%; }
   	&.secondary .meter { background: $secondaryColor;}
  	&.success .meter { background: $successColor;}
  	&.alert .meter { background: $alertColor;}

  	/* border radii */
  	&.radius { @include border-radius($buttonRadius);
      .meter { @include border-radius(2px); }
    }
  	&.round { @include border-radius(1000px);
      .meter { @include border-radius(1000px); }
    }

  }

  /* Pricing Tables ---------------------- */
  .pricing-table { border: $priceTableBorder; margin-left: 0; margin-bottom: 20px;
    & * { list-style: none; line-height: 1; }
    .title { background-color: $priceTitleBgColor; padding: $priceTitlePadding; text-align: $priceTitleAlign; color: $priceTitleColor; font-weight: $priceTitleWeight; font-size: $priceTitleSize; }
    .price { background-color: $priceMoneyBgColor; padding: $priceMoneyPadding; text-align: $priceMoneyAlign; color: $priceMoneyColor; font-weight: $priceMoneyWeight; font-size: $priceMoneySize; }
    .description { background-color: $priceBgColor; padding: $priceDescPadding; text-align: $priceDescAlign; color: $priceDescColor; font-size: $priceDescFontSize; font-weight: $priceDescWeight; line-height: $priceDescLineHeight; border-bottom: $priceDescBtmBorder; }
    .bullet-item { background-color: $priceBgColor; padding: $priceItemPadding; text-align: $priceItemAlign; color: $priceItemColor; font-size: $priceItemFontSize; font-weight: $priceItemWeight; border-bottom: $priceItemBtmBorder; }
    .cta-button { background-color: $priceCtaBgColor; text-align: $priceCtaAlign; padding: $priceCtaPadding; }
  }
